---
image: /generated/articles-docs-animated-emoji-animated-emoji.png
id: animated-emoji
sidebar_label: "<AnimatedEmoji>"
title: "<AnimatedEmoji>"
slug: /animated-emoji/animated-emoji
crumb: "@remotion/animated-emoji"
---

import {AvailableEmoji} from "./AvailableEmoji";

_Part of the [`@remotion/animated-emoji`](/docs/animated-emoji) package._
_available from v4.0.187_

Displays an animated emoji from [Google Fonts Animated Emoji](https://googlefonts.github.io/noto-emoji-animation/).

:::note
**Self-hosting**: To load the assets, you need to copy the videos from the `public` folder of [`remotion-dev/animated-emoji`](https://github.com/remotion-dev/animated-emoji) into the `public` folder of your Remotion project.
:::

## Example

```tsx title="Animation.tsx"
import {AnimatedEmoji} from "@remotion/animated-emoji";

export const MyAnimation: React.FC = () => {
  return <AnimatedEmoji emoji="blush" />;
};
```

## Props

### `emoji`

See animated versions [here](https://googlefonts.github.io/noto-emoji-animation/).  
By default, no emoji assets are included. Copy them from the `public` folder of [`@remotion/animated-emoji`](/docs/animated-emoji) into the `public` folder of your Remotion project.

<AvailableEmoji />

### `scale?`

Change the resolution of the videos to load.  
By default `1`.

<table>
  <tr>
    <td>
      <code>0.5</code>
    </td>
    <td>512x512px</td>
  </tr>
  <tr>
    <td>
      <code>1</code>
    </td>
    <td>1024x1024px</td>
  </tr>
  <tr>
    <td>
      <code>2</code>
    </td>
    <td>2048x2048px</td>
  </tr>
</table>

### `calculateSrc?`

Customize the location where the videos are loaded.  
This is the default function:

```tsx twoslash title="calculate-src.ts"
import {staticFile} from "remotion";
import type {CalculateEmojiSrc} from "@remotion/animated-emoji";

export const defaultCalculateEmojiSrc: CalculateEmojiSrc = ({
  emoji,
  scale,
  format,
}) => {
  const extension = format === "hevc" ? "mp4" : "webm";

  return staticFile(`${emoji}-${scale}x.${extension}`);
};
```

## See also

- [`@remotion/animated-emoji`](/docs/animated-emoji)
- [`getAvailableEmojis()`](/docs/animated-emoji/get-available-emoji)
